<template>
    <div class="checkbox-container">
        <div class="menu">
            <h2 style="margin-bottom: 20px">菜单配置：</h2>
            <el-checkbox-group
                v-model="checkedCities"
                @change="handleCheckedCitiesChange"
            >
                <el-checkbox
                    v-for="city in cities"
                    :key="city.value"
                    :label="city.value"
                    >{{ city.label }}</el-checkbox
                >
            </el-checkbox-group>
            <h2 style="margin: 50px 0 20px 0">系统：</h2>
            <el-radio-group v-model="system" @change="handleCheckedSystemsChange">
                <el-radio :label="1">系统一</el-radio>
                <el-radio :label="2">系统二</el-radio>
                <el-radio :label="3">系统三</el-radio>
            </el-radio-group>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/pinia/counter'
import { onMounted, ref } from 'vue'

// const checkAll = ref(false)
// const isIndeterminate = ref(true)
const checkedCities = ref(['setting'])
// const checkedSystems = ref()
const cities = ref()
const system = ref()
// const systems = ref([
//     {
//         label: '系统一',
//         value: '001',
//     },
//     {
//         label: '系统二',
//         value: '002',
//     },
// ])
const system1 = ref([
{
            label: '产品',
            value: 'product',
            isShow: true
        },
        {
            label: '设置',
            value: 'setting',
            isShow: true
        },
        {
            label: '维护',
            value: 'system',
            isShow: true
        },
        {
            label: '清单管理',
            value: 'order',
            isShow: false
        },
        {
            label: '媒体',
            value: 'media',
            isShow: false
        },
        {
            label: 'IFrame',
            value: 'iframe',
            isShow: false
        },
        {
            label: '外系统',
            value: 'router',
            isShow: false
        },
        {
            label: '微服务',
            value: 'unit',
            isShow: false
        }
])
const system2 = ref([
{
            label: '产品',
            value: 'product',
            isShow: false
        },
        {
            label: '设置',
            value: 'setting',
            isShow: true
        },
        {
            label: '维护',
            value: 'system',
            isShow: false
        },
        {
            label: '清单管理',
            value: 'order',
            isShow: false
        },
        {
            label: '媒体',
            value: 'media',
            isShow: true
        },
        {
            label: 'IFrame',
            value: 'iframe',
            isShow: true
        },
        {
            label: '外系统',
            value: 'router',
            isShow: true
        },
        {
            label: '微服务',
            value: 'unit',
            isShow: false
        }
])
const system3 = ref([
{
            label: '产品',
            value: 'product',
            isShow: false
        },
        {
            label: '设置',
            value: 'setting',
            isShow: true
        },
        {
            label: '维护',
            value: 'system',
            isShow: false
        },
        {
            label: '清单管理',
            value: 'order',
            isShow: false
        },
        {
            label: '媒体',
            value: 'media',
            isShow: false
        },
        {
            label: 'IFrame',
            value: 'iframe',
            isShow: false
        },
        {
            label: '外系统',
            value: 'router',
            isShow: false
        },
        {
            label: '微服务',
            value: 'unit',
            isShow: false
        }
])

const counter = useCounterStore()

const handleCheckedCitiesChange = (value: string[]) => {
    counter.menuList.forEach((item) => {
        if (value.indexOf(item.value) > -1) {
            item.isShow = true
        } else {
            item.isShow = false
        }
    })
}

const handleCheckedSystemsChange = (value: string) => {
    if(value == '1') {
        counter.menuList = system1.value
    } else if(value == '2'){
        counter.menuList = system2.value
    } else if(value == '3') {
        counter.menuList = system3.value
    }
}

onMounted(() => {
    cities.value = counter.menuList
})
</script>

<style lang="scss" scoped>
.checkbox-container {
    padding: 20px;
}
</style>
